<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>座子</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="../css/mystyle.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/pintuer.js"></script>
    <style>
        img{
      height: 70px;
      width: 70px;
    }
  </style>
</head>

<body>
    <div id="info"></div>
    <form>
        <div class="panel admin-panel">
            <div class="panel-head line">
                <strong class="icon-reorder">餐桌管理</strong>
                <div class="button-group x10-move">
                    <a class="button border-blue-light bg-blue" href="./inserttable.html" id="btn">
                        <span class="icon-edit"></span>添加
                    </a>
                </div>
            </div>
            <table class="table table-hover text-center">
                <thead>
                    <tr>
                        <th width="120">ID</th>
                        <th>桌图</th>
                        <th>桌名</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tablebody"></tbody>
                <tr>
                    <td colspan="8">
                        <div class="pagelist">
                            <button class="button border-green" type="button" onclick="upPage()">上一页</button>
                            <span id="pageNum"></span>
                            <button class="button border-green" type="button" onclick="nextPage()">下一页</button>
                            <button class="button border-green" type="button" onclick="pageClick(this)">尾页</button>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>
    <script type="text/javascript">
        var json;
        window.onload = function () {
            listonLoad();
        }

        function pageClick(e) {
            var pageNum = document.getElementById('pageNum').children;
            if (e.innerText == "尾页") {
                for (let i = 0; i < pageNum.length; i++) {
                    pageNum[i].setAttribute('class', '');
                }
                pageNum[pageNum.length - 1].setAttribute('class', 'current');
                for (let i = 0; i < pageNum.length; i++) {
                    if (pageNum[i].getAttribute('class') == "current") {
                        var long = json.length - 4 * (i + 1) > 4 ? 4 * (i + 1) + 4 : json.length
                        var info = '';
                        for (let j = 4 * i; j < long; j++) {
                            info +=
                                `
                                <tr style="height: 69px">
                                    <td style="line-height: 69px">${json[j].id}</td>
                                    <td><img src="${json[j].icon}" class="image"></td>
                                    <td style="line-height: 69px">${json[j].text}</td>
                                    <td style="line-height: 69px">
                                        <div class="button-group">
                                            <a class="button border-red" href="javascript:void(0)" onclick="return del(${json[j].id})"><span class="icon-trash-o"></span> 删除</a> 
                                        </div>
                                    </td>
                                </tr>
                              `
                        }
                        $('#tablebody').html(info);
                        break;
                    }
                }
            } else {
                for (let i = 0; i < pageNum.length; i++) {
                    pageNum[i].setAttribute('class', '');
                }
                e.setAttribute('class', 'current');
                for (let i = 0; i < pageNum.length; i++) {
                    if (pageNum[i].getAttribute('class') == "current") {
                        var k = json.length / 4 == 0 ? parseInt(json.length / 4) : parseInt(json.length / 4) + 1
                        var long = i + 1 == k ? json.length : i * 4 + 4
                        var info = '';
                        for (let j = 4 * i; j < long; j++) {
                            info +=
                                `
                                <tr style="height: 69px">
                                    <td style="line-height: 69px">${json[j].id}</td>
                                    <td><img src="${json[j].icon}" class="image"></td>
                                    <td style="line-height: 69px">${json[j].text}</td>
                                    <td style="line-height: 69px">
                                    <div class="button-group">
                                        <a class="button border-red" href="javascript:void(0)" onclick="return del(${json[j].id})"><span class="icon-trash-o"></span> 删除</a> 
                                    </div>
                                    </td>
                                </tr>
                              `
                        }
                        $('#tablebody').html(info);
                        break;
                    }
                }
            }
        }

        function nextPage() {
            var pageNum = document.getElementById('pageNum').children;
            for (let i = 0; i < pageNum.length; i++) {
                // alert(pageNum[i].getAttribute('class'))
                if (pageNum[i].getAttribute('class') == "current") {
                    // alert(pageNum[i].getAttribute('class'))
                    if (pageNum[i].nextSibling) {
                        // alert(pageNum[i].getAttribute('class'))
                        pageNum[i].setAttribute('class', '');
                        pageNum[i + 1].setAttribute('class', 'current');
                        var long = json.length - 4 * (i + 1) > 4 ? 4 * (i + 1) + 4 : json.length
                        let info = '';
                        for (let j = 4 * (i + 1); j < long; j++) {
                            info +=
                                `
                                    <tr style="height: 69px">
                                        <td style="line-height: 69px">${json[j].id}</td>
                                        <td><img src="${json[j].icon}" class="image"></td>
                                        <td style="line-height: 69px">${json[j].text}</td>
                                        <td style="line-height: 69px">
                                            <div class="button-group">
                                                <a class="button border-red" href="javascript:void(0)" onclick="return del(${json[j].id})"><span class="icon-trash-o"></span> 删除</a> 
                                            </div>
                                        </td>
                                    </tr>
                                    `
                        }
                        $('#tablebody').html(info);
                        break;
                    } else {
                        alert('已经是最后一页了！')
                    }
                }
            }
        }

        function upPage() {
            var pageNum = document.getElementById('pageNum').children;
            for (let i = 0; i < pageNum.length; i++) {
                // alert(pageNum[i].getAttribute('class'))
                if (pageNum[i].getAttribute('class') == "current") {
                    // alert(pageNum[i].getAttribute('class'))
                    if (pageNum[i].previousSibling) {
                        // alert(pageNum[i].getAttribute('class'))
                        pageNum[i].setAttribute('class', '');
                        pageNum[i - 1].setAttribute('class', 'current');
                        let info = '';
                        for (let j = 4 * i - 4; j < 4 * i; j++) {
                            info +=
                                `
                                    <tr style="height: 69px">
                                        <td style="line-height: 69px">${json[j].id}</td>
                                        <td><img src="${json[j].icon}" class="image"></td>
                                        <td style="line-height: 69px">${json[j].text}</td>
                                        <td style="line-height: 69px">
                                            <div class="button-group">
                                                <a class="button border-red" href="javascript:void(0)" onclick="return del(${json[j].id})"><span class="icon-trash-o"></span> 删除</a> 
                                            </div>
                                        </td>
                                    </tr>
                                    `
                        }
                        $('#tablebody').html(info);
                        break;
                    } else {
                        alert('已经是第一页了！')
                    }
                }
            }
        }

        function listonLoad() {
            $.ajax({
                url: 'http://127.0.0.1:8080/wineapi/tablelist',
                dataType: 'json',
                type: 'get',
                data: {},
                success: function (data) {
                    if (data.code == "ok") {
                        json = data.data;
                        // var arr = json.data;
                        // console.log(json[1].id)
                        var pageNum = document.getElementById('pageNum');
                        var code = '';
                        var pageTotal = json.length / 4;
                        for (let i = 0; i < pageTotal; i++) {
                            if (i == 0) {
                                code += `<span class="current" onclick="pageClick(this)">${i+1}</span>`
                            } else {
                                code += `<span class="" onclick="pageClick(this)">${i+1}</span>`
                            }
                        }
                        pageNum.innerHTML = code;
                        let info = '';
                        var long = json.length > 4 ? 4 : json.length;
                        for (let j = 0; j < long; j++) {
                            info +=
                                `
                        <tr style="height: 69px">
                            <td style="line-height: 69px">${json[j].id}</td>
                            <td><img src="${json[j].icon}" class="image"></td>
                            <td style="line-height: 69px">${json[j].text}</td>
                            <td style="line-height: 69px">
                                <div class="button-group">
                                    <a class="button border-red" href="javascript:void(0)" onclick="return del(${json[j].id})"><span class="icon-trash-o"></span> 删除</a> 
                                </div>
                            </td>
                        </tr>
                        `
                        }
                        $('#tablebody').html(info);
                    }
                },
                error: function (err) {
                    console.log('err', err)
                }
            })
        }

        function del(id) {
            if (confirm("您确定要删除吗?")) {
                $.ajax({
                    url: 'http://127.0.0.1:8080/wineapi/tabledel',
                    dataType: 'json',
                    type: 'get',
                    data: {
                        id
                    },
                    success: function (data) {
                        if (data.code == "ok") {
                            var str =
                                `
                                    <div class="alert alert-green">
                                        <span class="close rotate-hover"></span><strong>恭喜：</strong>操作成功。
                                    </div>
                                `
                            $('#info').html(str)
                            setTimeout(function () {
                                $('#info').html('')
                            }, 2000)
                            listonLoad();
                        } else {
                            var str =
                                `
                                    <div class="alert alert-red">
                                        <span class="close rotate-hover"></span><strong>错误：</strong>没有该ID。
                                    </div>
                                `
                            $('#info').html(str)
                            setTimeout(function () {
                                $('#info').html('')
                            }, 2000)
                        }
                    },
                    error: function (err) {
                        console.log('err', err)
                    }
                })
            }
        }

        function DelSelect() {
            var Checkbox = false;
            $("input[name='id[]']").each(function () {
                if (this.checked == true) {
                    Checkbox = true;
                }
            });
            if (Checkbox) {
                var t = confirm("您确认要删除选中的内容吗？");
                if (t == false) return false;
            } else {
                alert("请选择您要删除的内容!");
                return false;
            }
        }
    </script>
</body>

</html>